<template>
   <div>

       <a-modal
               :visible="visible"
               okText="选择"
               cancelText="取消"
               :title="title"
               :maskClosable="false"
               :destroyOnClose="true"
               :keyboard="false"
               width="1200px"
               @cancel="closeModal"
               @ok="handleSubmit">
           <Preview class="preview" v-show="record.id"  :data="record"></Preview>
           <search-table
                   :url="couponUseConditionUrl"
                   :hideSelect="true"
                   ref="discountsearchtable"
                   :form="couponUseConditionForm"
                   :columns="couponUseConditionColumns"
                   width="1000px"
                   :default-params="defaultParams"
           >
               <template slot="searchForm">
                   <a-form layout="inline" :form="couponUseConditionForm">

                       <a-form-item label="领取人昵称">
                           <a-input
                                   style="width:180px"
                                   v-decorator="[
                                'userName',
                              ]"
                                   placeholder="请输入领取人昵称"
                           >
                           </a-input>
                       </a-form-item>

                       <a-form-item label="用券状态">
                           <a-select
                                   showSearch
                                   allowClear
                                   style="width:180px"
                                   v-decorator="[
                                'couponStatus',
                              ]"
                                   :options="couponStatusList"
                                   placeholder="用券状态"
                           >
                           </a-select>
                       </a-form-item>

                       <a-form-item label="申请时间">
                           <fast-range-picker
                                   v-decorator="[
                                'getStartTime-getEndTime',
                              ]">
                           </fast-range-picker>
                       </a-form-item>
                   </a-form>
               </template>
               <template slot="tableOperation" slot-scope="{ record }">
                   <a-space>
                       <permission >
                   <!--     <span v-show="record.orderId" class="text-primary pointer"
                              @click="searchOrder(record.orderId)">查看订单</span>-->
                        <a-button v-show="record.orderId"  type="link"   @click="searchOrder(record.orderId)">查看订单</a-button>
                        <a-button v-show="!record.orderId"  type="link" class="gray"  @click="searchOrder(record.orderId)">查看订单</a-button>
                       </permission>
                   </a-space>
               </template>
           </search-table>

           <template slot="footer">
                <a-button key="back" @click="closeModal">
                关闭
                </a-button>
            </template>
       </a-modal>
   </div>
</template>

<script>
    // import SearchTable from './components/SearchTable'
    import Preview from './components/Preview';
    export default {
        components:{
            Preview,
            // SearchTable
        },
        name: 'couponUseCondition',
        props: {
            record: {
                type: Object,
                default() {
                    return {}
                }
            },
            visible: {
                type: Boolean,
                default: false
            },
        },
        computed: {
            title () {
                return '查看详情'
            },

        },
        data () {
            return {
                couponUseConditionUrl:'coupon/receive-records',
                couponUseConditionForm: this.$form.createForm(this, { name: "table_search" }),
                couponUseConditionColumns:[
                    {
                        title: "领取人昵称",
                        dataIndex: "userName",
                        key: "userName",
                        rowKey:"userName"
                    },
                    {
                        title: "领取人头像",
                        dataIndex: "avatar",
                        key: "avatar",
                        rowKey:"avatar",
                        customRender: (text,row) => {
                         return   <div><table-img src={text}/> </div>
                        },
                    },
                    {
                        title: "领券时间",
                        dataIndex: "receiveTime",
                        key: "receiveTime",
                        rowKey: "receiveTime",
                    },
                    {
                        title: "用券时间",
                        dataIndex: "useDate",
                        key: "useDate",
                        rowKey: "useDate",
                        customRender: (text,row) => {
                        /*    if (text == 0) {
                                return "减满劵";
                            } else if (text == 1) {
                                return "礼品劵";
                            } else if (text == 2) {
                                return "折扣劵";
                            }
                            return "";*/
                            return !! text ?text :"————"
                        },
                    },
                    {
                        title: "领取来源",
                        dataIndex: "couponOwnWay",
                        key: "couponOwnWay",
                        rowKey: "couponOwnWay",
                        customRender: (text,row) => {
                                if (text == 0) {
                                    return "领取";
                                } else if (text == 1) {
                                    return "兑换";
                                } else if (text == 2) {
                                    return "会员权益发放";
                                }else if (text == 3) {
                                    return "权益卡发放";
                                }else if (text == 4) {
                                    return "会员卡发放";
                                }
                        },
                    },
                    {
                        title: "用券状态",
                        dataIndex: "couponStatus",
                        key: "couponStatus",
                        rowKey: "couponStatus",
                        customRender: (text,row) => {
                            if (text == 0) {
                                return "未使用";
                            } else if (text == 1) {
                                return "已使用";
                            } else if (text == 2) {
                                return "已失效";
                            }
                        },
                    },
                    {
                        title: "优惠内容",
                        dataIndex: "couponAmount",
                        key: "couponAmount",
                        rowKey: "couponAmount",
                        width: 150,
                        customRender: (value, row) => {
                            if (row.couponType == 0 || row.couponType == 1) {
                                return "优惠金额" + ((value/100).toFixed(2)) + "元";
                            } else if (row.couponType == 2) {
                                return "打" + row.discountRatio + "折";
                            }
                            return value;
                        },
                    },
                    {
                        title: "操作",
                        key: "operation",
                        rowKey: "operation",
                        dataIndex: "operation",
                        scopedSlots: { customRender: "operation" },
                    },


                ],
                currentRecord: {},

              /*  领取人次不传
                使用人次传1，已使用*/

                defaultParams:{
                    // couponId:this.record.id,
                    // couponStatus:this.record.couponStatus
                },

                couponStatusList:[
                    {
                        label: "全部",
                        value: '',
                    },
                    {
                        label: "未使用",
                        value: '0',
                    },
                    {
                        label: "已经使用",
                        value: '1',
                    },
                    {
                        label: "已经失效",
                        value: '2',
                    },
                ]
            }
        },
        watch: {
            visible (value) {
                if (value && this.record.id) {
                    console.log("接受到的数据",this.record)
                    // console.log(this.record.id)
                    // this.getInfo()
                    this.defaultParams.couponId = this.record.id
                    this.defaultParams.couponStatus = this.record.couponStatus
                }
            }
        },
        mounted () {
        },
        methods: {
            /* getInfo () {
                 this.$get('/product/reviews/id', {id: this.record.id}).then(res => {
                     if (res && res.returnCode === 1000) {
                         const record = res.dataInfo || {}
                         console.log(record)
                     }
                 })
             },*/
            closeModal (freshTable) {
                // this.couponUseConditionForm.resetFields()
                this.$emit('cancel', freshTable)
            },
            handleSubmit(){

            },
            searchOrder(orderId){
                if (!!orderId){
                    this.$router.push({
                        name: "OrderList",
                        query:{
                           orderId:orderId
                        }
                    });
                    this.$emit('cancel', true)
                }else {
                    this.$message.warn('该优惠券暂未使用 无相关订单信息！')
                }

            }
        }
    }
</script>

<style scoped>
    .preview{
        width:300px;
        height:90px;
        margin-bottom: 20px;
    }
    .gray{
        color: darkgray;
    }
</style>